<template>
	<view class='login'>
		<!-- 关闭按钮 -->
		<view class='closeBtn dFlex jCenter_aCenter' @click.stop="closeLogin">
			<u-icon name="close-circle" size='20px'></u-icon>
		</view>
		<view class="advImg imgPublic">
			<div class="container" :style="iframeStyle">
				<div class="scroll-wrapper">
					<img :src="bgImage1" alt="Scrolling Image":style="iframeStyle">
					<img :src="bgImage2" alt="Scrolling Image" :style="iframeStyle"> 
					<img :src="bgImage1" alt="Scrolling Image" :style="iframeStyle">
					<img :src="bgImage2" alt="Scrolling Image" :style="iframeStyle">
					<img :src="bgImage1" alt="Scrolling Image" :style="iframeStyle">
					<img :src="bgImage2" alt="Scrolling Image" :style="iframeStyle"> 
					<img :src="bgImage1" alt="Scrolling Image" :style="iframeStyle">
					<img :src="bgImage2" alt="Scrolling Image" :style="iframeStyle">
				</div>
			     
			</div>
			
		</view>
		
		<view>
		<!-- <view class='loginTitle'>{{$t('login.desc')}}</view> -->
		<view class='loginWay dFlex jAround_aCenter' v-if="reset_password">
			<view :class="['wayOne',way == 1 ? 'activeWay' : '']" @click='way = 1;reset_password=false'>
				{{$t('login.login')}}
			</view>
			<view class="wayOne activeWay">{{$t('login.reset')}}</view>
		</view>
		<view class='loginWay dFlex jAround_aCenter' v-else>
			<view :class="['wayOne',way == 1 ? 'activeWay' : '']" @click='way = 1;'>
				{{$t('login.login')}}
			</view>
			<view :class="['wayOne',way == 2 ? 'activeWay' : '']" @click='way = 2'>{{$t('login.regist')}}</view>
		</view>
		<view  v-if='way == 1'>
			<view class="loginIpt" >
				<view class="phone dFlex jStart_aCenter" v-if='isPhone'>
					<view class='area'>
						<u-icon @click="showPhoneCode=true" name="arrow-down" :label='phoneCode' labelPos='left'
							size='12px'></u-icon>
					</view>
					<view class='phoneIpt'>
						<input type="text" :auto-focus="isPhone" v-model='account' @input='checkAccount'  class="inputclass">
					</view>
				</view>
				<view v-else>
					<input v-model='account' :auto-focus="!isPhone" @input='checkAccount' type="text"
						:placeholder="$t('login.placeholder3')"  class="inputclass">
				</view>
				
			</view>
			<view class="loginIpt" >
				
				<view >
					<input v-model='password' type="password" :placeholder="$t('login.placeholder2')"  class="inputclass">
				</view>
			</view>
		</view>
		<view class="loginIpt" v-if='way == 2'>
			<view class="phone dFlex jStart_aCenter" v-if='isPhone'>
				<view class='area'>
					<u-icon @click="showPhoneCode=true" name="arrow-down" :label='phoneCode' labelPos='left'
						size='12px'></u-icon>
				</view>
				<view class='phoneIpt'>
					<input type="text" :auto-focus="isPhone" v-model='account' @input='checkAccount' class="inputclass">
				</view>
			</view>
			<view v-else>
				<input v-model='account' :auto-focus="!isPhone" @input='checkAccount' type="text"
					:placeholder="$t('login.placeholder3')"  class="inputclass">
			</view>
		</view>
		<u-button v-if="way == 2" style="color:#000;background-color: #f8e801;border:none;" type="primary" class='loginBtn'  :text="$t('login.text1')"
			@click='changeStep()'></u-button>
		<view v-else>
			<u-button type="primary" style="color:#000;background-color: #f8e801;border:none;" class='loginBtn'  :text="$t('login.text2')"
				@click='login'></u-button>
			<view @click="handleReset" style="width: 100%;text-align: center;margin-top: -40rpx;color: #999;">
				{{this.$t('login.reset')}}
			</view>
		</view>
		<!-- 验证码输入框 -->
		<view class='codeBox' v-if='step == 2'>
			<!-- <view class='tips'>{{$t('login.sendTxt')}}<br>{{account}}</view> -->
			<view class='tips' style="text-align: left;margin-left:20px;margin-top:10px">
				OTP:<text @click="sendmsg()" class='loginBtn' style="padding:5px 10px;font-size: 14px;border-radius: 5px;margin-left: 20px;">{{send}}</text>
			</view>
			<u-code-input v-model="vcode" class='codeIpt dFlex jCenter_aCenter'></u-code-input>
			<view class='tips' style="text-align: left;margin-left:20px;margin-top:10px">Set Password:</view>
			<view class="loginIpt" style="margin-top: 20rpx;">
				<input v-model='password' type="password" :placeholder="$t('login.placeholder2')">
			</view>
			<u-button style="color:#000;background-color: #f8e801;border:none;" type="primary" @click="register" class='loginBtn' 
				:text="$t('account.regist')"></u-button>
		</view>
		<view style="margin-top: 5px;display: flex;justify-content: center;align-items: center;margin-bottom: 5px;margin-left:5px;font-size: 12px;">
			
				<view>
					<u-checkbox-group v-model="xieyi" @change="handelXieyi">
						<u-checkbox :name="1"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view>
				{{$t('login.xieyi1')}}<text @click.stop="goWeb(1)"
					style="color: blue;margin:0px 10px;font-size: 12px;">{{$t('login.xieyi2')}}</text>
					{{$t('login.xieyi3')}}
					<text @click.stop="goWeb(2)"
						style="color: blue;margin:0px 10px">{{$t('login.xieyi4')}}</text>
			    </view>
		</view>
		</view>
		<u-action-sheet @select="handleSelectPhoneCode" :actions="phoneCodeList" :title="$t('login.title1')"
			:show="showPhoneCode"></u-action-sheet>
			
	</view>
</template>

<script>
	export default {
		name: "loginindex",
		data() {
			return {
				way: 1,
				step: 1,
				isPhone: false,
				account: '',
				password: '',
				vcode: '',
				showPhoneCode: false,
				phoneCode: '+966',
				phoneCodeList: [{
					name: '+966'
				}, {
					name: '+971'
				}, {
					name: '+973'
				}, {
					name: '+968'
				}, {
					name: '+965'
				}, {
					name: '+974'
				}],
				xieyi: 0,
				bgImage1: './static/images/back.png',
				bgImage2: './static/images/back.png',
				reset_password: false,
				navbarHeight:255,
				navbarHeight2:255,
				send: this.$t('login.sendmsg'),
				totalTime: 60,
			};
		},
		
		computed: {
			iframeStyle() {
				// #ifdef APP-PLUS
					 // 获取状态栏高度
					const systemInfo = uni.getSystemInfoSync();
					// 获取窗口高度（即可视区域的高度）
					const windowHeight = systemInfo.windowHeight; 
				// #endif
				// #ifdef H5
					// 获取网页的实际高度
					const windowHeight = document.documentElement.scrollHeight;
				// #endif
				console.log(windowHeight);
				const height=windowHeight-this.navbarHeight;
			    return {
				    height: height+`px`, // 动态计算高度
			    };
			}
		},
		mounted() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			// 获取窗口高度（即可视区域的高度）
			const windowHeight = systemInfo.windowHeight;
			// #ifdef APP-PLUS
			this.navbarHeight2=240;
			// #endif
			this.navbarHeight = systemInfo.statusBarHeight +this.navbarHeight2; // 状态栏高度 + 自定义导航栏高度
			this.getImage()
		},
		methods: {
			handleReset() {
				this.way = 2
				this.reset_password = true
			},
			getImage() {
				this.$api('/User/getimage').then(res => {
					this.bgImage1 = res.loginbg1
					this.bgImage2 = res.loginbg2
				})
			},
			handelXieyi(e) {
				console.log('e', e)
				this.xieyi = e[0] ?? 0
				console.log('xieyi', this.xieyi)
			},
			goWeb(url) {
				uni.navigateTo({
					url: './xieyi?type=' + url
				})
			},
			isEmail() {
				const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				return regex.test(this.account);
			},
			async changeStep() {
				const _this = this
				if (_this.xieyi == 0) {
					uni.showToast({
						title: this.$t('login.tipxieyi'),
						icon: "none"
					})
					return
				}
				if (!_this.account) {
					uni.showToast({
						title:this.$t('login.placeholder3'),
						icon: "none"
					})
					return
				}
				if (!this.isEmail()) {
					uni.showToast({
						title: this.$t('login.placeholder3'),
						icon: "none"
					})
					return
				}
				_this.sendmsg();
				_this.step++;
			},
			async sendmsg() {
				const _this = this
				if(_this.totalTime==60){
					const result = await this.$api('/user/sendmsg', {
						username: _this.account,
						type: _this.reset_password ? 2 : 1
					})
					_this.send = this.$t('login.resend')+'( ' + _this.totalTime + ' )s';
					let clock = window.setInterval(() => {
					    _this.totalTime--;
					    _this.send = this.$t('login.resend')+'( ' + _this.totalTime + ' )s';
					    if (_this.totalTime < 0) {
					        window.clearInterval(clock);
					        _this.send = _this.$t('login.resend');
					        _this.totalTime = 60;
					    }
					}, 1000);
				}
				
			},
			async login() {
				const _this = this
				if (_this.xieyi == 0) {
					uni.showToast({
						title: this.$t('login.tipxieyi'),
						icon: "none"
					})
					return
				}
				if (!_this.account) {
					uni.showToast({
						title: this.$t('login.placeholder3'),
						icon: "none"
					})
					return
				}
				if (!_this.password) {
					uni.showToast({
						title: this.$t('login.placeholder5'),
						password: "none"
					})
					return
				}

				let username = _this.account
				if (_this.isPhone) {
					username = _this.phoneCode + username
				}
				const result = await this.$api('/user/login', {
					username: username,
					password: _this.password
				})
				this.$cache.set('token', result.token)
				this.$cache.set('userInfo', result)
				this.$emit('close')
			},
			async register() {
				const _this = this
				if (!_this.account) {
					uni.showToast({
						title: this.$t('login.placeholder3'),
						icon: "none"
					})
					return
				}
				
				if (!_this.vcode) {
					uni.showToast({
						title: this.$t('login.placeholder6'),
						icon: "none"
					})
					return
				}
				if (!_this.password) {
					uni.showToast({
						title: this.$t('login.placeholder5'),
						icon: "none"
					})
					return
				}

				let username = _this.account
				if (_this.isPhone) {
					username = _this.phoneCode + username
				}
				if (this.reset_password) {
					await this.$api('/user/resetpass', {
						username: username,
						password: _this.password,
						check_code: _this.vcode
					})
					this.way = 1
					this.step = 1
					this.reset_password = false
				} else {
					const result = await this.$api('/user/reg', {
						username: username,
						password: _this.password,
						check_code: _this.vcode
					})
					this.$cache.set('token', result.token)
					this.$cache.set('userInfo', result)
					this.$emit('close')
				}
			},
			handleSelectPhoneCode(e) {
				this.phoneCode = e.name
				this.showPhoneCode = false
			},
			// 检测输入的是手机号还是邮箱
			checkAccount() {
				/* if (this.account.indexOf('@') >= 0) {
					this.isPhone = false;
				} else {
					this.isPhone = true;
				} */
			},
			closeLogin() {
				this.$emit('close');
			}
		}
	}
</script>

<style lang="scss">
	.inputclass{
		line-height: 1.8em;
		height: 1.8em;
		font-size: 14px;
	}
	.container {
		width: 200%; /* 容器的宽度 */
		//height: 100vw; /* 容器的高度 */
		overflow: hidden; /* 隐藏超出容器的部分 */
		position: relative;
	}
	.scroll-wrapper {
		display: flex;
	    position: absolute;
	    top: 0;
	    left: 0;
	    animation: scroll 80s linear infinite; /* 动画效果 */
	}
		
	.scroll-wrapper img {
	    display: block; /* 防止图片之间有间隙 */
	    width: 200%; /* 图片宽度 */
	    //height: 100vw; /* 图片高度自适应 */
	}
	
	
	@keyframes scroll {
		0% {
			transform: translateX(0); /* 初始位置 */
		}
		100% {
			transform: translateX(-400%); /* 结束位置 */
		}
	}
	.login {
		.codeBox {
			.loginBtn {
				margin-top: 30px;
				color:#000;
				background-color:#f8e801 ;
			}

			.codeIpt {
				::v-deep .u-code-input__item {
					border-radius: 5px;
				}
			}

			.tips {
				width: 100%;
				text-align: center;
				margin: 50px auto 15px;
				font-size: 16px;
				font-weight: bold;
			}

			width:100%;
			height: 255px;
			// background: rgba(255, 255, 255, 0.9);
			background: rgba(255, 255, 255, 1);
			position: absolute;
			z-index: 1;
			bottom:30px;
			left: 0%;
			padding-top:10px;
		}

		.loginBtn {
			width: 80%;
			margin: 0 auto 30px;
			color:#fff;
			background-color:#f8e801 ;
			border:none;
		}

		.loginIpt {
			.phoneIpt {
				flex: 1;
				margin-left: 5px;
			}

			width: 80%;
			margin: 0 auto 10px;
			border:1px solid rgb(111, 114, 125);
			padding:5px  8px;
			box-sizing: border-box;
			border-radius: 8px;
		}

		.loginWay {
			.wayOne {
				flex: 1;
				text-align: center;
				color: white;
				padding: 6px 0;
			}

			.activeWay {
				background: white;
				color: #404553;
				border-radius: 50px;
			}

			width: 60%;
			margin: 10px auto 15px;
			padding: 4px;
			border-radius: 50px;
			background: rgba(64, 69, 83, 0.8);
		}

		.loginTitle {
			width: 100%;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 12px;
		}

		.advImg {
			width: 100%;
		}

		.closeBtn {
			width: 28px;
			height: 28px;
			text-align: center;
			line-height: 28px;
			background: white;
			position: absolute;
			right: 12px;
			top: 12px;
			z-index: 10;
			border-radius: 50%;
		}

		width:100vw;
		height: 100vh;
		margin: 0 auto;
		background: white;
		position: relative;
		border-radius: 10px;
		overflow: hidden;
	}
</style>